<template>
    <div>
        <div class="filter-container">
            <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create"  plain>添加角色</el-button>
        </div>

        <el-row>
            <el-col :xs="24" :sm="24" :md="18">
                <el-table
                    v-loading.body="loading"
                    stripe
                    border
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    class="text-center"
                    @selection-change="handleSelectionChange">
                    <el-table-column label="ID" prop="id" width="50"/>
                    <el-table-column label="组名" prop="name" width="130"/>
                    <el-table-column label="权限">
                        <template slot-scope="scope">
                            <template>
                                <el-tag v-for="(v, k) in scope.row.role_access" :key="v.id" v-if="k < 4">{{ v.name }}</el-tag>
                            </template>
                            <template v-if="scope.row.role_access && scope.row.role_access.length > 4">
                                ...
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建者" prop="creator.name" width="80"/>
                    <el-table-column label="创建时间" prop="created_at" width="150"/>
                    <el-table-column label="操 作" width="150px">
                        <template slot-scope="scope">
                            <el-button type="primary"
                                @click="edit(scope.row)">
                                编辑
                            </el-button>
                            <destroy-confirm
                                route="role/Destroy"
                                :primary="scope.row.id"
                                @success="handleSearch">
                            </destroy-confirm>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                    class="pull-right clearfix"
                    background
                    :current-page.sync="pageNo"
                    :page-sizes="pageOptions.pageSizesList"
                    :page-size="pageSize"
                    :layout="pageOptions.layout"
                    :total="totalDataNumber"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: {

                },
                loading: false,
                selected: [],
                tableData: [],
                pageNo: 1,
                pageSize: 20,
                pageOptions: this.$store.state.backend.pageOptions,
                totalDataNumber: 0,
                statusTheme: [
                    'danger',
                    'success',
                ]
            }
        },
        watch: {
            '$route' (val) {
                if (val.name === 'manager.role') {
                    this.initData();
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageNo = 1;
                this.pageSize = parseInt(`${val}`);
                this.handleSearch();
            },
            handleCurrentChange(val) {
                this.pageNo = parseInt(`${val}`);
                this.handleSearch();
            },
            handleSelectionChange(val) {
                this.selected = val;
            },
            handleSearch() {
                this.loading = true;
                let filter = Object.assign({}, this.search, {
                    page: this.pageNo,
                    pageSize: this.pageSize,
                });
                this.$store.dispatch('role/Lists', filter).then(res => {
                    this.tableData = res.data.data;
                    this.totalDataNumber = res.data.meta.total;
                }).finally(() => {
                    this.loading = false;
                });
            },
            initData() {
                this.handleSearch();
            },
            create() {
                this.$router.push({name: 'manager.role.create'});
            },
            edit(row) {
                this.$router.push({name: 'manager.role.edit', params: {id: row.id}});
                //this.$router.push('manager/'+ row.id);
            },
            destroy(id) {
                this.$confirm('删除后将无法恢复, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$store.dispatch('role/Destroy', id).then(res => {
                        this.$message.success('删除成功!');
                        this.handleSearch();
                        // 更新角色缓存
                        this.$store.dispatch('role/All', 'role');
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
        },
        created() {
            this.initData();
        }
    }
</script>

<style scoped>

</style>

